<template>
    <div>
        <el-form ref="form" label-width="80px">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
                    <el-form-item label="时间筛选:">
                        <el-date-picker size="small" @change="dateChange"
                            v-model="dateVal" :picker-options="pickerOptions"
                            type="daterange" :clearable="false"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7">
                    <el-form-item label="茶室tid:">
                        <el-input v-model="searchTid" placeholder="请输入茶室tid"
                            class="w140" size="small" clearable
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7">
                    <el-form-item label="订单类型:">
                        <el-select v-model="searchType" placeholder="请选择" 
                            size="small" class="w140" clearable
                        >
                            <el-option key="1" label="生成订单" value="1">
                            </el-option>
                            <el-option key="2" label="支付成功" value="2">
                            </el-option>
                            <el-option key="3" label="支付超时" value="3">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7">
                    <el-form-item class="teAliLeft">
                        <el-button type="primary" @click="cliScreen" size="small" class="mr5">
                            立即筛选
                        </el-button>
                        <el-button @click="cliEmpty" size="small">
                            清空
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-tag type="success" class="mb5">
            已支付的充值金额合计：¥{{ orderAmountTo ? orderAmountTo : '0.00' }}
        </el-tag>
        <el-table :data="tempList1" border class="wPer100">
            <el-table-column prop="id" label="订单id" width="65">
            </el-table-column>
            <el-table-column prop="out_trade_no" label="充值订单号" width="190">
            </el-table-column>
            <el-table-column prop="mid" label="用户mid" width="80">
            </el-table-column>
            <el-table-column prop="mname" label="用户昵称">
            </el-table-column>
            <el-table-column prop="bphone" label="用户手机号" width="115">
            </el-table-column>
            <el-table-column prop="balance" label="充值金额" width="80">
            </el-table-column>
            <el-table-column prop="reality_balance" label="到账金额" width="80">
            </el-table-column>
            <el-table-column label="订单类型" width="80">
                <template slot-scope="scope">
                    {{ 
                        scope.row.type == 1 ? '生成订单' :
                        scope.row.type == 2 ? '支付成功' :
                        scope.row.type == 3 ? '支付超时' : scope.row.type
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="tid" label="茶室tid" width="70">
            </el-table-column>
            <el-table-column prop="date" label="创建时间">
            </el-table-column>
        </el-table>
        <div class="floRight mt30 pb40">
            <el-pagination :current-page="currentPage1" :total="total1"
                :page-sizes="[10]" :page-size="pageSize1"
                background layout="prev, pager, next, total, jumper"
                @current-change="handleCurrentChange1"
            />
        </div>
    </div>
</template>
<script>
import { getHomeTeaBalance } from '@s/api'
import timeFormat from "@u/timeFormat";
export default {
    data() {
        return {
            dateVal: '', searchStart: '', searchEnd: '',
            searchTid: '', searchType: '',
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > new Date().setDate(new Date().getDate());//不可大于今天
                }
            },
            currentPage1: 1, pageSize1: 10, tempList1: [], total1: 0,
            orderAmountTo: 0,

        }
    },
    mounted() {
        this.searchStart = timeFormat.currentTime(new Date());
        this.searchEnd = timeFormat.currentTime(new Date().setDate(new Date().getDate() + 1));
        this.dateVal = [
            new Date(), new Date()
        ];
        this.getDataList1();
    },
    methods: {
        dateChange(dateVal) {
            this.searchStart = timeFormat.currentTime(dateVal[0]);
            this.searchEnd = timeFormat.currentTime(new Date().setDate(new Date(dateVal[1]).getDate() + 1));
        },
        getDataList1() {
            getHomeTeaBalance({
                token: this.$store.getters.token,
                page: this.currentPage1 - 1,
                number: this.pageSize1,
                start_date: this.searchStart,
                end_date: this.searchEnd,
                tid: this.searchTid,
                type: this.searchType
            }).then(res => {
                console.log(res)
                this.tempList1 = res.data.data;
                this.orderAmountTo = res.data.amount;
                this.total1 = res.data.count;
            });
        },
        handleCurrentChange1(currentPage) {
            this.currentPage1 = currentPage1;
            this.getDataList1();
        },
        cliScreen() {
            this.currentPage1 = 1;
            this.getDataList1();
        },
        cliEmpty() {
            this.searchTid = '';
            this.searchType = '';
        }
    }
}
</script>